/**
 * 基础菜单 商品参数管理
 */
<template>
  <div>
    <!-- 添加sku界面 -->
    <el-dialog
      title="商品参数"
      :visible.sync="editAttributeVisible"
      width="60%"
      @click="closeAttributeDialog"
    >
      <el-form label-width="90px" ref="editAttribute">
        <el-form-item label="规格名">
          <el-input
            size="small"
            v-model="editAttribute.attribute"
            auto-complete="off"
            placeholder="请输入规格名"
          ></el-input>
        </el-form-item>
        <el-form-item label="规格值">
          <el-input
            size="small"
            v-model="editAttribute.value"
            auto-complete="off"
            placeholder="请输入规格值"
          ></el-input>
        </el-form-item>
        <el-form-item width="100" align="center">
          <el-button size="mini" type="primary" @click="addAttribute"
            >添加</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "GoodsAttribute",
  props: ["editAttributeVisible", "editAttribute"],
  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    addAttribute() {
      this.$emit("addAttribute", this.editAttribute);
      this.closeAttributeDialog();
    },
    // 关闭编辑、增加弹出框
    closeAttributeDialog() {
      this.$emit("update:editAttributeVisible", false);
      this.$emit("closeAttributeDialog", false);
    },
  },
};
</script>

<style scoped>
</style>